<!--  -->
<template>
  <div class="seoset">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="站点SEO" name="1">
        <CollaSeoSite />
      </el-tab-pane>
      <el-tab-pane label="页面SEO" name="2">
        <div class="notice_t" v-if="seoSiteStatus === 1">
          <i class="el-icon-info"></i>
          <div class="nt_p">
            <p>已设置统一TDK，当前seo设置不生效。<el-button @click="linkTdkSet" type="text" size="medium">【前往修改】</el-button></p>
          </div>
        </div>
        <CollaSeoPage />
      </el-tab-pane>
      <el-tab-pane label="系统分类SEO" name="3">
         <div class="notice_t" v-if="seoSiteStatus === 1">
          <i class="el-icon-info"></i>
          <div class="nt_p">
            <p>已设置统一TDK，当前seo设置不生效。<el-button @click="linkTdkSet" type="text" size="medium">【前往修改】</el-button></p>
          </div>
        </div>
        <div style="height:15px;"></div>
        <CollaSeoCategory />
      </el-tab-pane>
      <el-tab-pane label="系统内容SEO" name="4">
         <div class="notice_t" v-if="seoSiteStatus === 1">
          <i class="el-icon-info"></i>
          <div class="nt_p">
            <p>已设置统一TDK，当前seo设置不生效。<el-button @click="linkTdkSet" type="text" size="medium">【前往修改】</el-button></p>
          </div>
        </div>
        <div style="height:15px;"></div>
        <CollaSeoItem />
      </el-tab-pane>
    </el-tabs>
    <div style="height: 18px;"></div>
  </div>
</template>

<script>
import CollaSeoSite from '@/components/main/user/siteseo/CollaSeoSite.vue'
import CollaSeoPage from '@/components/main/user/siteseo/CollaSeoPage.vue'
import CollaSeoCategory from '@/components/main/user/siteseo/CollaSeoCategory.vue'
import CollaSeoItem from '@/components/main/user/siteseo/CollaSeoItem.vue'
export default {
  created () {
    let siteSeo = parseInt(this.sConfig.siteSeo)
    if (!isNaN(siteSeo) && siteSeo >= 0) {
      this.$post('/seo/seosite', { site_seo: siteSeo }).then(response => {
        if (response && response.id) {
          this.seoSiteStatus = response.status
        }
      })
    }
  },
  data () {
    return {
      activeName: '1',
      sConfig: {
        siteSeo: this.$store.state && this.$store.state.site && this.$store.state.site.config ? '' + this.$store.state.site.config.siteSeo : ''
      },
      // TKD状态
      seoSiteStatus: 0
    }
  },
  methods: {
    // 标签切换触发
    handleClick (tab, event) {
      if (tab.name !== '1') {
        this.sConfig.siteSeo = this.$store.state && this.$store.state.site && this.$store.state.site.config ? '' + this.$store.state.site.config.siteSeo : ''
        let siteSeo = parseInt(this.sConfig.siteSeo)
        if (!isNaN(siteSeo) && siteSeo >= 0) {
          this.$post('/seo/seosite', { site_seo: siteSeo }).then(response => {
            if (response && response.id) {
              this.seoSiteStatus = response.status
            }
          })
        }
      }
    },
    linkTdkSet () {
      this.activeName = '1'
    }
  },
  components: {
    CollaSeoSite,
    CollaSeoPage,
    CollaSeoCategory,
    CollaSeoItem
  }
}
</script>

<style scoped>
.seoset /deep/ .el-tabs__header .el-tabs__nav-wrap {
  padding-left: 30px;
}
.seoset /deep/ .el-tabs__header .el-tabs__item {
  font-size: 16px;
  padding:0 30px;
}
.seoset /deep/ .el-tabs__header .el-tabs__item:nth-child(2) {
  padding-left: 0;
}
.seoset /deep/ .el-tabs__header .el-tabs__item:last-child {
  padding-right: 0;
}
.seoset .el-collapse {
  border-top: 0;
}
.seoset .tempalte-title {
  font-size: 15px;
  font-weight: bold;
  color: #353535;
}
.seoset .active {
  color: #409eff;
}
.seoset /deep/ .el-table th {
  color: #555;
}
.notice_t {
  position: relative;
  padding-left: 20px;
  margin-top: 10px;
  color: #666;
}
.notice_t i {
  position: absolute;
  color:#E6A23C;
  left: 0;
  top: 11px;
}
</style>
